<template >
  <fks-dialog
    :visible.sync="importVisible"
    :append-to-body="true"
    width="800px"
    destroy-on-close
    class="importUser"
    @close="cancelExport"
  >
    <div slot="title">
      <i class="fks-icon-import" />
      <span style="margin-left: 8px">{{ LANG.IMPORT }}</span>
    </div>
    <fks-form label-width="70px" style="width: 100%">
      <fks-form-item :label="LANG.TEMPLATE_UPLOAD" :span="24">
        <fks-upload
          ref="upload"
          :class="{ chinese: isChinese, english: !isChinese }"
          style="width: 100%"
          :action="uploadUrl"
          drag
          name="file"
          :headers="{
            'Fawkes-Auth': ACESS_TOKEN
          }"
          :with-credentials="true"
          :auto-upload="false"
          :limit="1"
          accept=".xlsx"
          :file-list="fileList"
          :http-request="importData"
        >
          <i class="fks-icon-upload" />
          <div class="fks-upload__text">
            {{ LANG.DRAG_FILE_TIP }}
            <em>{{ LANG.CLICK_UPLOAD }}</em>
            <br />
            <span>{{ LANG.SUPPORT_XLSX }}</span>
          </div>
        </fks-upload>
      </fks-form-item>
      <fks-form-item :label="LANG.TEMPLATE_DOWNLOAD">
        <fks-button
          icon="fks-icon-download"
          margin-top="10px"
          @click="exportTemplates"
        >
          {{ LANG.DOWNLOAD_TEMPLATE }}
        </fks-button>
      </fks-form-item>
    </fks-form>
    <template slot="footer">
      <fks-button type="primary" icon="fks-icon-check" @click="submit">
        <span style="margin-left: 4px">{{ LANG.SAVE }}</span>
      </fks-button>
    </template>
  </fks-dialog>
</template>
<script>
import {
  downloadOrgTemplates,
  downloadUserTemplates,
  downloadPeopleTemplates,
  downloadPostTemplates,
  importOrg,
  importPost,
  importPeople,
  importUser
} from '../api'
import { exportFile } from '@/utils/file'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    flag: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isChinese: true,
      ACESS_TOKEN: this.$storage.get('access_token'),
      //上传的地址
      uploadUrl: '',
      exportMenu: [],
      fileList: [],
      importVisible: this.visible
    }
  },
  computed: {
    portalId() {
      return this.$store.state.portal.id
    }
  },
  watch: {
    visible(val) {
      this.importVisible = val
    }
  },
  created() {
    if (this.$lang === 'en') {
      this.isChinese = false
    } else {
      this.isChinese = true
    }
  },
  methods: {
    //关闭导入用户弹窗
    cancelExport() {
      this.$emit('update:visible', false)
      this.fileList = []
    },
    //提交导入用户
    async submit() {
      this.$message.info(this.LANG.IMPORTING)
      this.$refs.upload.submit()
      this.$emit('fetchData')
      this.cancelExport()
    },
    exportTemplates() {
      switch (this.flag) {
        case 'user': {
          this.downloadUserTemplates()
          break
        }
        case 'people': {
          this.downloadPeopleTemplates()
          break
        }
        case 'post': {
          this.downloadPostTemplates()
          break
        }
        case 'org': {
          this.downloadOrgTemplates()
          break
        }
      }
    },
    downloadUserTemplates() {
      downloadUserTemplates()
        .then((res) => {
          exportFile(res)
        })
        .catch(() => {})
    },
    downloadPeopleTemplates() {
      downloadPeopleTemplates()
        .then((res) => {
          exportFile(res)
        })
        .catch(() => {})
    },
    downloadPostTemplates() {
      downloadPostTemplates()
        .then((res) => {
          exportFile(res)
        })
        .catch(() => {})
    },
    downloadOrgTemplates() {
      downloadOrgTemplates()
        .then((res) => {
          exportFile(res)
        })
        .catch(() => {})
    },
    //导入用户
    async importData(params) {
      // 根据后台需求数据格式
      let form = new FormData()
      // 文件对象
      form.append('file', params.file)
      form.append('portalId', this.portalId)
      let res = {}
      switch (this.flag) {
        case 'user': {
          res = await importUser(form)
          break
        }
        case 'people': {
          res = await importPeople(form)
          break
        }
        case 'post': {
          res = await importPost(form)
          break
        }
        case 'org': {
          res = await importOrg(form)
          break
        }
      }
      if (res.request.response.type == 'application/json') {
        let fileReader = new FileReader()
        fileReader.readAsText(res.data)
        let that = this
        fileReader.onload = function (result) {
          let jsondata = JSON.parse(result.target.result)
          if (jsondata.status) {
            that.$message.success(that.LANG.IMPORT_SUCCESS)
            that.$emit('fetchData')
          } else {
            that.$message.error(that.LANG.IMPORT_FAILED)
          }
        }
      } else {
        // 'application/vnd.ms-excel'
        exportFile(res)
        this.$message.error(this.LANG.IMPORT_FAILED)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.chinese {
  ::v-deep .fks-upload-dragger {
    width: 662px;
  }
}
.english {
  ::v-deep .fks-upload-dragger {
    width: 736px;
  }
}
</style>